<template>
  <div
    :class="[
      'single-note',
      isIncludes([1, 3], mode) ? 'single-note-edit' : '',
      id === -1 ? 'is-add-note' : ''
    ]"
    ref="singleNote"
  >
    <div
      class="note-list-row"
      v-for="(item, index) in currentEditList"
      :key="item.key"
    >
      <zl-textarea
        :ref="'inputContent_' + index"
        v-if="item.type === 'text'"
        :content.sync="item.content"
        :index="index"
        @paste="handlePaste($event)"
        @input="handleInput($event)"
        :readonly="mode === 2"
      ></zl-textarea>
      <div v-if="item.type === 'image'" class="flex-multi-row flex-wrap">
        <div
          class="edit-item-img-wrap rel"
          v-for="(subItem, subIndex) in item.content"
          :key="subIndex"
          :style="{
            marginBottom:
              (item.content.length % 2 === 0 &&
                (subIndex === item.content.length - 1 ||
                  subIndex === item.content.length - 2)) ||
              (item.content.length % 2 === 1 &&
                subIndex === item.content.length - 1)
                ? '0'
                : '16px'
          }"
        >
          <!-- <div class="edit-item-close flex-center" v-if="mode !== 2" @click="deleteImg(item, index, subIndex)">
            &times;
          </div> -->
          <img
            class="edit-item-close"
            v-if="mode !== 2 && !isPreview"
            @click="deleteImg(item, index, subIndex)"
            src="//image.zlketang.com/public/news/images/new_official/play/note_delete_icon.png"
          />
          <img
            class="edit-item-img"
            :src="subItem"
            @click="previewImage($event)"
          />
        </div>
      </div>
    </div>
    <zl-textarea
      ref="inputContent"
      style="margin-top: 10px;"
      v-if="mode === 1 || mode === 3"
      :content.sync="currentEditContent"
      id="bottomTextarea"
      :rows="6"
      @paste="handlePaste($event)"
      :showPlaceHolder="currentEditList.length > 0 ? false : true"
    ></zl-textarea>
    <div
      class="flex-center-wrap flex-justify-between save-row"
      v-if="mode === 1 || mode === 3"
    >
      <div class="rel flex-center-wrap pointer" style="width:100px">
        <label
          class="file-input-label"
          :for="fileUploadElementId"
          title="从输入框上失去焦点，直接点击到此元素上，才能在文本相应位置添加图片"
        ></label>
        <input
          class="upload-file-input"
          type="file"
          :id="fileUploadElementId"
          @change="handleFileChange"
        />
        <img
          class="image-pos mr4"
          src="//image.zlketang.com/public/news/others/imgs/web_pc/40cf37fcd27ac0ec72dce616fe02e2c4.png"
        />
        <span class="upload-img-label">上传图片</span>
      </div>
      <div class="flex-center-wrap">
        <button
          v-if="mode === 3"
          class="cancel-btn flex-center cu"
          @click="cancel"
        >
          取消
        </button>
        <div class="save-btn flex-center cu" @click="save">
          保存
        </div>
      </div>
    </div>
    <div
      class="flex-center-wrap flex-justify-between edit-row"
      v-if="mode === 2"
    >
      <div class="create-time">{{ create_time }}</div>
      <div class="flex-center-wrap">
        <img
          src="//image.zlketang.com/public/news/others/imgs/web_pc/d3d303f74d0db431de3f765f7fe63d43.png"
          class="edit-btn"
          @click="openEdit"
        />
        <img
          src="//image.zlketang.com/public/news/others/imgs/web_pc/ff123bfa30ab6d50a1d2163bb225c04a.png"
          class="delete-btn"
          @click="deleteRow"
        />
      </div>
    </div>
    <image-preview :show.sync="show" :url="currentImg"></image-preview>
  </div>
</template>

<script>
import imagePreview from './imagePreview.vue'
import zlTextarea from './zlTextarea.vue'
export default {
  name: 'noteItem',
  props: {
    id: {
      type: Number,
      default: -1
    },
    // 笔记列表
    info: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: Number,
      default: 1 // 1：新增模式；2：列表模式；3：编辑模式
    }
  },
  components: {
    'image-preview': imagePreview,
    'zl-textarea': zlTextarea
  },
  watch: {
    currentEditContent: {
      handler(val, oldVal) {
        // 计算其他长度
        let totalLong = this.getContentLong()
        // 原来就超过10000直接将新值置空
        if (totalLong >= 10000) {
          this.currentEditContent = ''
          this.$refs.inputContent.fieldValue = ''
          return this.$message.warning('笔记长度超出10000字,超出部分无法保存')
        }
        // 加上输入框的长度等于总长度
        let long = totalLong + val.length
        if (long <= 10000) {
          this.oldContent = val
        }
        if (long > 10000) {
          this.currentEditContent = this.oldContent
          this.$refs.inputContent.fieldValue = this.oldContent
          this.$refs.inputContent.disabled = false
          return this.$message.warning('笔记长度超出10000字,超出部分无法保存')
        }
      },
      deep: true,
      immediate: false
    },
    currentEditList: {
      handler(val, oldVal) {
        // 监听总长度不能超过10000
        let otherLong = this.currentEditContent.length || 0
        if (otherLong > 10000) {
          return this.$message.warning('笔记长度超出10000字,超出部分无法保存')
        }
        let totalLong = 0
        val.map(item => {
          // totalLong += item.content.length
          if (item.type === 'text') {
            totalLong += item.content.length
          }
          if (item.type === 'image') {
            item.content.map(item2 => {
              totalLong += item2.length
            })
          }
        })
        let long = totalLong + otherLong
        if (long <= 10000) {
          this.oldContentArr = JSON.parse(JSON.stringify(val))
        }
        if (long > 10000) {
          this.$message.warning('笔记长度超出10000字')
          // this.$refs.inputContent.fieldValue = this.currentEditContent
          this.currentEditList = JSON.parse(JSON.stringify(this.oldContentArr))
          this.currentEditList.map((item, index) => {
            if (item.type === 'text') {
              let str = 'inputContent_' + index
              this.$refs[str][0].fieldValue = item.content
              this.$refs[str][0].handleInput2(item.content)
            }
          })
          this.$forceUpdate()
        }
      },
      deep: true,
      immediate: false
    },
    info: {
      handler(val) {
        // 【1】数据处理，服务端与浏览器应该保持一致
        let { content, create_time } = val || {}
        let copyContent = this.deepCopy(content)
        this.currentEditList = this.isArray(copyContent) ? copyContent : []
        this.create_time = create_time || ''
        // 【2】需要在浏览器操作DOM时，需要判断环境，因为watch中写immediate为true时，服务端也会执行一次
        if (typeof window === 'object') {
          // 页面在浏览器激活后，需要逻辑处理（如操作DOM等）
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      isPreview: false,
      currentEditList: [],
      currentEditContent: '',
      activeElementList: [],
      show: false,
      currentImg: '',
      create_time: '',
      // 文件上传type=file元素唯一id
      fileUploadElementId: 'zl-a',
      oldContent: '',
      oldContentArr: []
    }
  },

  methods: {
    /**
     * getSelectedText 获取光标位置.
     * @author [Hu Bin]
     * @param {object} el - 文本框类型的DOM对象.
     * @returns {object} - {start: 0, end: 0}
     */
    getSelectedText(el) {
      let userSelection
      if (
        typeof el.selectionStart === 'number' &&
        typeof el.selectionEnd === 'number'
      ) {
        // 非IE浏览器
        // 获取选区的开始位置
        let startPos = el.selectionStart
        // 获取选区的结束位置
        let endPos = el.selectionEnd
        return { start: startPos, end: endPos }
      } else if (document.selection) {
        // IE浏览器
        userSelection = document.selection.createRange().text
      }
      return userSelection
    },
    /**
     * fileToDataURL file对象转base64字符串.
     * @author [Hu Bin]
     * @param {object} file - file对象.
     * @returns {Promise} - ***
     */
    fileToDataURL(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.onload = function(e) {
          resolve(e.target.result)
        }
        reader.readAsDataURL(file)
      })
    },
    /**
     * dataURLToBlob base64字符串转Blob.
     * @author [Hu Bin]
     * @param {string} dataURL - base64字符串.
     * @returns {object} - blob
     */
    dataURLToBlob(dataURL) {
      var arr = dataURL.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    /**
     * blobToFile blob对象转file对象.
     * @author [Hu Bin]
     * @param {object} blob - blob对象.
     * @param {string} filename - 文件名.
     * @param {string} mimetype - 媒体类型.
     * @returns {object} - file对象
     */
    blobToFile(blob, filename, mimetype) {
      let file = new window.File([blob], filename, { type: mimetype })
      return file
    },

    /**
     * getPasteImgData 读取剪贴板图片内容.
     * @author [Hu Bin]
     * @param {object} event - clipboardEvent.
     * @returns {Promise} - Promise
     */
    getPasteImgData(event) {
      let clipboardData = event.clipboardData
      let i = 0
      let items
      let item
      let types
      if (clipboardData) {
        items = clipboardData.items

        if (!items) {
          return Promise.resolve(null)
        }

        item = items[0]
        // 保存在剪贴板中的数据类型
        types = clipboardData.types || []
        for (; i < types.length; i++) {
          if (types[i] === 'Files') {
            item = items[i]
            break
          }
        }
        return new Promise((resolve, reject) => {
          // 判断是否为图片数据
          if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
            // 读取该图片
            let file = item.getAsFile()
            resolve(file)
          } else {
            resolve(null)
          }
        })
      }
    },
    /**
     * generateRandomString 生成随机字符串.
     * @author [Hu Bin]
     * @param {number} num - 生成位数，默认为6位.
     * @returns {string} - 返回一个num位字符串类型的随机字符创
     */
    generateRandomString(num = 6) {
      if (!/^\d+$/.test(num)) {
        num = 6
      }
      let alphabets = new Array(26)
        .fill(null)
        .map((v, i) => String.fromCharCode(97 + i))
      let numArr = new Array(10).fill(null).map((v, i) => i)
      let randomArr = [...alphabets, ...numArr]
      let firstChar = alphabets[Math.floor(Math.random() * 26)]
      let leftChars = new Array(num - 1).fill(null).map(() => {
        let randomIndex = Math.floor(Math.random() * randomArr.length)
        return randomArr[randomIndex]
      })
      leftChars.unshift(firstChar)
      return leftChars.join('')
    },
    // 【3】保存
    save() {
      let {
        object_id,
        course_id,
        section_id,
        year,
        teacher_id,
        subject_id,
        circle_id
      } = this.info
      let attachInfo = this.pick(this.info, [
        'object_id',
        'course_id',
        'section_id',
        ' year',
        'teacher_id',
        'subject_id',
        'circle_id'
      ])
      this.$emit(
        'save',
        this.currentEditList,
        this.currentEditContent,
        attachInfo
      )
      this.currentEditContent = ''
    },
    // 【4】处理paste剪贴板粘贴情形
    async handlePaste(event) {
      console.log('handlePaste', event)
      let file = await this.getPasteImgData(event)
      console.log('file', file)
      if (!file) return
      let uploadResult
      try {
        uploadResult = await this.uploadImg(file)
      } catch (e) {
        this.$message({ type: 'warning', message: '上传失败，请重试~' })
        return
      }
      let { url: dataUrl } = uploadResult
      dataUrl = this.parseResourceUrl(dataUrl)

      let el = event.target
      this.handleSingleInputBox(el, dataUrl)
    },
    // 【5】文件选择变化
    async handleFileChange(e) {
      let totalLong = this.getContentLong() + this.currentEditContent.length
      if (totalLong >= 10000) {
        return this.$message.warning('笔记长度超出限制,超出部分无法保存')
      }
      let file = e.target.files[0]
      if (!file) return
      if (!file.type.includes('image'))
        return this.$message.warning('不支持非图片类型~')
      let uploadResult
      try {
        uploadResult = await this.uploadImg(file)
      } catch (err) {
        this.$message({ type: 'warning', message: '上传失败，请重试~' })
        return
      }

      let { url: dataUrl } = uploadResult
      dataUrl = this.parseResourceUrl(dataUrl)
      // 查找上次点击的哪个输入框，以确定在数组的哪个位置插入数据
      let lastInputEl = this.activeElementList[2]
      let { node } = lastInputEl || {}
      if (lastInputEl && node) {
        // 存在文本框节点
        this.handleSingleInputBox(node, dataUrl)
      } else {
        // 不存在文本框节点
        let len = this.currentEditList.length
        if (
          this.currentEditList.length &&
          this.currentEditList[len - 1].type === 'image'
        ) {
          // 最后一个元素是图片
          this.currentEditList[len - 1].content.push(dataUrl)
        } else {
          this.currentEditList.push({
            type: 'image',
            content: [dataUrl],
            key: this.generateRandomString(4)
          })
        }
      }
      // 清除输入框的值
      e.target.value = ''
    },

    // 【6】处理单个输入框情形 el - 当前输入框DOM对象；dataUrl - base64地址图片
    handleSingleInputBox(el, dataUrl) {
      let range = {}
      let beforeContent = ''
      let afterContent = ''
      let { tagName, id } = el
      let value = el.value
      if (tagName.toLowerCase() === 'textarea' && value.trim()) {
        // 存在textarea并且输入框有值
        range = this.getSelectedText(el)
        beforeContent = value.substring(0, range.start)
        afterContent = value.substring(range.start)

        if (id === 'bottomTextarea') {
          // 底部的输入框
          if (range.start === 0) {
            // 光标在最前面
            let lastIndex = this.currentEditList.length - 1
            let lastRowItem = this.currentEditList[lastIndex]
            if (lastRowItem && lastRowItem.type === 'image') {
              // 前面一条数据为图片，则直接往里面push一张图片即可
              this.currentEditList[lastIndex].content.push(dataUrl)
            } else {
              this.currentEditList.push({
                type: 'image',
                content: [dataUrl],
                key: this.generateRandomString(4)
              })
            }
          } else if (range.start === value.length) {
            // 光标在最后面
            this.currentEditList.push({
              type: 'text',
              content: beforeContent,
              key: this.generateRandomString(4)
            })
            this.currentEditList.push({
              type: 'image',
              content: [dataUrl],
              key: this.generateRandomString(4)
            })
            this.currentEditContent = ''
          } else {
            // 光标在中间
            this.currentEditList.push({
              type: 'text',
              content: beforeContent,
              key: this.generateRandomString(4)
            })
            this.currentEditList.push({
              type: 'image',
              content: [dataUrl],
              key: this.generateRandomString(4)
            })
            this.currentEditContent = afterContent
          }
        } else {
          // 非底部的输入框
          if (range.start === 0) {
            // 光标在最前面
            let newData = {
              type: 'image',
              content: [dataUrl],
              key: this.generateRandomString(4)
            }
            let index = +id.replace(/\D/g, '')
            let current = this.currentEditList[index]
            let lastRowItem = this.currentEditList[index - 1]
            if (lastRowItem && lastRowItem.type === 'image') {
              // 前面一条数据存在且类型为图片，则直接往里面push一张图片即可
              this.currentEditList[index - 1].content.push(dataUrl)
            } else {
              this.currentEditList.splice(index, 1, newData, current)
            }
          } else if (range.start === value.length) {
            // 光标在最后面
            let newData = {
              type: 'image',
              content: [dataUrl],
              key: this.generateRandomString(4)
            }
            let index = +id.replace(/\D/g, '')
            let current = this.currentEditList[index]
            let nextRowItem = this.currentEditList[index + 1]
            if (nextRowItem && nextRowItem.type === 'image') {
              //后面一条数据存在且类型为图片，则直接往数组最前面添加一张图片即可
              this.currentEditList[index + 1].content.unshift(dataUrl)
            } else {
              this.currentEditList.splice(index, 1, current, newData)
            }
          } else {
            // 光标在中间
            let index = +id.replace(/\D/g, '')
            this.currentEditList.splice(
              index,
              1,
              {
                type: 'text',
                content: beforeContent,
                key: this.generateRandomString(4)
              },
              {
                type: 'image',
                content: [dataUrl],
                key: this.generateRandomString(4)
              },
              {
                type: 'text',
                content: afterContent,
                key: this.generateRandomString(4)
              }
            )
          }
        }
      } else {
        // 无参考的文本框，则将图片添加到最后
        let len = this.currentEditList.length
        if (
          this.currentEditList.length &&
          this.currentEditList[len - 1].type === 'image'
        ) {
          // 最后一个元素是图片
          this.currentEditList[len - 1].content.push(dataUrl)
        } else {
          this.currentEditList.push({
            type: 'image',
            content: [dataUrl],
            key: this.generateRandomString(4)
          })
        }
      }
    },
    // 【7】预览图片
    previewImage(e) {
      if (!e.target) {
        return this.$message.warning('请刷新重试')
      }
      this.isPreview = true
      this.prevewImg(e.target, {}, () => {
        console.log('关闭预览')
        this.isPreview = false
      })
    },
    // 【8】删除图片
    deleteImg(item, index, subIndex) {
      item.content.splice(subIndex, 1)
      if (item.content.length === 0) {
        // 全部删除时，清除当前行数据
        this.currentEditList.splice(index, 1)
      }
    },
    // 【9】监听文字输入（除最后一个文本框外）
    handleInput(e) {
      let el = e.target
      let { value, id } = el
      let index = +id.replace(/\D/g, '')
      if (!value) {
        this.currentEditList.splice(index, 1)
        /* this.$confirm('确定删除当前行吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
          .then(() => {
            this.currentEditList.splice(index, 1)
          })
          .catch(() => {})

        return */
      }
    },
    // 【2】logDom 记录点击DOM数组
    logDOM() {
      // 记录上次编辑的输入框DOM，用于在指定位置插入图片的操作。
      let singleNoteEl = this.$refs.singleNote
      singleNoteEl.onclick = e => {
        if (this.activeElementList.length >= 6) {
          this.activeElementList.pop()
        }
        this.activeElementList.unshift({
          tagName: e.target.tagName,
          node: e.target,
          id: e.target.id
        })
      }
    },
    cancel() {
      let { content } = this.info
      // 点击取消时，重置数据
      this.currentEditList = this.deepCopy(content)
      this.currentEditContent = ''
      this.$emit('update:mode', 2)
    },
    openEdit() {
      this.$emit('update:mode', 3)
    },
    deleteRow() {
      let { object_id } = this.info
      this.$emit('delete', object_id)
    },
    async uploadImg(file) {
      let miniFile = ''
      try {
        let { file: mini_file } = await this.compressImg(file)
        miniFile = mini_file
      } catch (e) {
        miniFile = file
      }
      let formData = new FormData()
      formData.append('from', 'web')
      formData.append('images', miniFile)
      return this.ajaxUpload('/wxpub/solution/upload_img', formData)
    },
    compressImg(file, qualitys = 0.92) {
      if (parseInt((file.size / 1024).toFixed(2)) < 1024) {
        qualitys = 0.85
      }
      if (5 * 1024 < parseInt((file.size / 1024).toFixed(2))) {
        qualitys = 0.92
      }
      if (file[0]) {
        return Promise.all(
          Array.from(file).map(e => this.compressImg(e, qualitys))
        ) // 如果是 file 数组返回 Promise 数组
      } else {
        return new Promise(resolve => {
          if ((file.size / 1024).toFixed(2) < 300) {
            resolve({
              file: file
            })
          } else {
            const reader = new FileReader() // 创建 FileReader
            reader.onload = ({ target: { result: src } }) => {
              const image = new Image() // 创建 img 元素
              image.onload = async () => {
                const canvas = document.createElement('canvas') // 创建 canvas 元素
                const context = canvas.getContext('2d')
                var targetWidth = image.width
                var targetHeight = image.height
                var originWidth = image.width
                var originHeight = image.height
                if (
                  1 * 1024 <= parseInt((file.size / 1024).toFixed(2)) &&
                  parseInt((file.size / 1024).toFixed(2)) <= 10 * 1024
                ) {
                  var maxWidth = 1600
                  var maxHeight = 1600
                  targetWidth = originWidth
                  targetHeight = originHeight
                  // 图片尺寸超过的限制
                  if (originWidth > maxWidth || originHeight > maxHeight) {
                    if (originWidth / originHeight > maxWidth / maxHeight) {
                      // 更宽，按照宽度限定尺寸
                      targetWidth = maxWidth
                      targetHeight = Math.round(
                        maxWidth * (originHeight / originWidth)
                      )
                    } else {
                      targetHeight = maxHeight
                      targetWidth = Math.round(
                        maxHeight * (originWidth / originHeight)
                      )
                    }
                  }
                }
                if (
                  10 * 1024 <= parseInt((file.size / 1024).toFixed(2)) &&
                  parseInt((file.size / 1024).toFixed(2)) <= 20 * 1024
                ) {
                  maxWidth = 1400
                  maxHeight = 1400
                  targetWidth = originWidth
                  targetHeight = originHeight
                  // 图片尺寸超过的限制
                  if (originWidth > maxWidth || originHeight > maxHeight) {
                    if (originWidth / originHeight > maxWidth / maxHeight) {
                      // 更宽，按照宽度限定尺寸
                      targetWidth = maxWidth
                      targetHeight = Math.round(
                        maxWidth * (originHeight / originWidth)
                      )
                    } else {
                      targetHeight = maxHeight
                      targetWidth = Math.round(
                        maxHeight * (originWidth / originHeight)
                      )
                    }
                  }
                }
                canvas.width = targetWidth
                canvas.height = targetHeight
                context.clearRect(0, 0, targetWidth, targetHeight)
                context.drawImage(image, 0, 0, targetWidth, targetHeight) // 绘制 canvas
                const canvasURL = canvas.toDataURL('image/jpeg', qualitys)
                const buffer = atob(canvasURL.split(',')[1])
                let length = buffer.length
                const bufferArray = new Uint8Array(new ArrayBuffer(length))
                while (length--) {
                  bufferArray[length] = buffer.charCodeAt(length)
                }
                const miniFile = new File([bufferArray], file.name, {
                  type: 'image/jpeg'
                })
                resolve({
                  file: miniFile,
                  origin: file,
                  beforeSrc: src,
                  afterSrc: canvasURL,
                  beforeKB: Number((file.size / 1024).toFixed(2)),
                  afterKB: Number((miniFile.size / 1024).toFixed(2))
                })
              }
              image.src = src
            }
            reader.readAsDataURL(file)
          }
        })
      }
    },
    // 重置数据
    reset() {
      this.currentEditList = []
      this.currentEditContent = ''
      this.activeElementList = []
      this.show = false
      this.currentImg = ''
      this.create_time = ''
    },
    // 点击截图按钮
    shotScreen() {
      let totalLong = this.getContentLong() + this.currentEditContent.length
      if (totalLong >= 10000) {
        return this.$message.warning('笔记长度超出范围,超出部分无法保存')
      }
      this.notesShotVideo(this.id)
    },
    // 截图注入笔记中
    shotInjectNotes(url, index) {
      // 查找上次点击的哪个输入框，以确定在数组的哪个位置插入数据
      let lastInputEl = this.activeElementList[2]
      let { node } = lastInputEl || {}
      if (lastInputEl && node) {
        // 存在文本框节点
        this.handleSingleInputBox(node, url)
      } else {
        // 不存在文本框节点
        let len = this.currentEditList.length
        if (
          this.currentEditList.length &&
          this.currentEditList[len - 1].type === 'image'
        ) {
          // 最后一个元素是图片
          this.currentEditList[len - 1].content.push(url)
        } else {
          this.currentEditList.push({
            type: 'image',
            content: [url],
            key: this.generateRandomString(4)
          })
        }
      }
      // 关闭弹窗
      this.closeNotesShotVideo()
    },
    // 获取已有长度
    getContentLong() {
      let totalLong = 0
      this.currentEditList.map(item => {
        if (item.type === 'text') {
          totalLong += item.content.length
        }
        if (item.type === 'image') {
          item.content.map(item2 => {
            totalLong += item2.length
          })
        }
      })
      return totalLong
    }
  },
  mounted() {
    this.$bus.$on('screenShotInjectNotes', (url, index) => {
      if (+index === +this.id) {
        this.shotInjectNotes(url, index)
      }
    })
    this.logDOM()
    this.fileUploadElementId = this.generateRandomString(6)
  },
  inject: ['notesShotVideo', 'closeNotesShotVideo']
}
</script>

<style scoped name="csslint-ignore">
.rel {
  /* css-ignore */
  position: relative;
}
.file-input-label {
  /* css-ignore */
  cursor: pointer;
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
}
.upload-file-input {
  /* css-ignore */
  width: 0;
  height: 0;
}
.pointer {
  /* css-ignore */
  cursor: pointer;
}
.note-title {
  /* css-ignore */
  height: 42px;
  line-height: 22px;
  padding: 10px 0;
}
.mr4 {
  /* css-ignore */
  margin-right: 4px;
}
.f16 {
  /* css-ignore */
  font-size: 16px;
}
.f18 {
  /* css-ignore */
  font-size: 18px;
}
.note-box {
  /* css-ignore */
  height: calc(100% - 94px);
  overflow-y: auto;
  color: #e6e6e6;
  background-color: #212121;
}
.add-note-box {
  /* css-ignore */
  padding: 0 20px 20px;
}

.add-note-edit {
  width: 380px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
.static-textarea {
  /* css-ignore */
  height: 140px;
}
.dynamic-textarea {
  /* css-ignore */
  border: none;
  outline: 0;
  width: 100%;
  /* padding-top: 6px; */
  background-color: transparent;
  color: #fff;
  font-size: 14px;
  resize: none;
}
.image-pos {
  /* css-ignore */
  width: 16px;
  height: 16px;
}
.save-row {
  /* css-ignore */
  margin-top: 22px;
}
.edit-row {
  /* css-ignore */
  margin-top: 20px;
  color: #fff;
}
.save-btn {
  width: 56px;
  height: 28px;
  background: #3480ff;
  border-radius: 4px;

  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}
.shot-btn {
  /* css-ignore */
  width: 60px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #ffffff;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  line-height: 28px;
  margin-right: 8px;
}
.my-note-box {
  /* css-ignore */
  padding: 0 20px;
}
.edit-item-img-wrap {
  /* css-ignore */
  z-index: 10;
  width: 60px;
  margin-right: 10px;
  height: 60px;
  margin-bottom: 10px;
  cursor: pointer;
}
.edit-item-img-wrap:nth-child(5n) {
  /* css-ignore */
  margin-right: 0;
}
.edit-item-img {
  /* css-ignore */
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}
.edit-item-close {
  /* css-ignore */
  position: absolute;
  top: -10px;
  right: -5px;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.create-time {
  /* css-ignore */
  font-size: 12px;
  color: #8c8c8c;
}

.note-list-row + .note-list-row {
  /* css-ignore */
  margin-top: 10px;
}
.upload-img-label {
  height: 16px;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 16px;
}

.cancel-btn {
  width: 56px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  margin-right: 10px;
}
.save-btn {
  width: 56px;
  height: 28px;
  background: #3480ff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}
.single-note {
  transition: all 0.3s;
  border-color: #fff;
}
.single-note-edit {
  /* width: 380px; */
  background: #ffffff;
  border-radius: 4px;

  border: 1px solid #dcdfe6;
  padding: 10px;
}
.is-add-note {
  padding: 0;
  border: none;
}
.edit-btn,
.delete-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.delete-btn {
  margin-left: 22px;
}
</style>
